<template>
    <div>
        <div class="tital">
            <h2>订单列表</h2>
            <button>刷新</button>
        </div>
        <div class="datalist">
            <div class="datalistTital">
                <div>订单状态：{{ stateJudge(this.aggregate.status) }}
                </div>
            </div>
            <div class="DataStyle">
                <div>订单信息</div>
                <ul>
                    <li><span>订单编号：</span>{{ aggregate.aggregateId }}</li>
                    <li><span>订单状态：</span>{{ stateJudge(this.aggregate.status) }}</li>
                    <li><span>支付方式：</span>{{ aggregate.payType == '1' ? 'App支付' : '网页支付' }}</li>
                    <li><span>用户账号：</span>{{ aggregate.userId }}</li>
                    <li><span>提交时间：</span>{{ aggregate.createTime }}</li>
                    <li><span>订单来源：</span>{{ aggregate.source }}</li>
                </ul>
            </div>
            <div class="DataStyle">
                <div>收货人信息</div>
                <ul>
                    <li><span>用户名：</span>{{ orderUser.contacts }}</li>
                    <li><span>联系方式：</span>{{ orderUser.phone }}</li>
                    <li><span>邮政编码：</span>{{ orderUser.postCode }}</li>
                    <li><span>收货地址：</span>{{ orderUser.fullAddress }}</li>
                </ul>
            </div>

            <div class="DataStyle ">
                <div>商品信息</div>

                <div class="goodsData" v-for="item in orderProds" :key="item">
                    <div class="goodsImg"><span>商品图片：</span>
                        <img :src="item.pic" alt="">
                    </div>
                    <ul class="ulData">
                        <li><span>商品名称：</span>{{ item.prodName }}</li>
                        <li><span>商品单价：</span>{{ item.price }}</li>
                        <li><span>商品属性：</span>{{ item.attribute }}</li>
                        <li><span>商品数量：</span>{{ item.number }}</li>
                        <li><span>买家备注：</span>{{ item.remarks }}</li>
                        <li><span>小计：</span>{{ item.countMonkey }}</li>
                    </ul>
                </div>

            </div>
            <div class="DataStyle">
                <div>费用合计</div>
                <ul>
                    <li><span>商品合计：</span>{{ totalMonkey.prodMonkey }}</li>
                    <li><span>运费：</span>{{ totalMonkey.dvyMonkey }}</li>
                    <li><span>优惠金额：</span>{{ totalMonkey.reduceAmount }}</li>
                    <li><span>实付金额：</span>{{ totalMonkey.countMonkey }}</li>
                </ul>
            </div>
            <div class="DataStyle">
                <div>订单跟踪</div>
                <div class="logistics">物流单号：{{ this.aggregate.status == 3 || this.aggregate.status == 4 ||
                    this.aggregate.status == 5 ? dvyFlowId : "暂无" }}</div>
                <div style=" margin: 40px ; font-size: 12px;">
                    <el-steps style="height: 160px;"
                        v-if="this.aggregate.status == 3 || this.aggregate.status == 4 || this.aggregate.status == 5"
                        direction="vertical" :active="this.aggregate.status - 1" finish-status="success"
                        process-status=" finish">
                        <el-step title="已发货"></el-step>
                        <el-step title="运输中"></el-step>
                        <el-step title="已签收"></el-step>
                    </el-steps>
                </div>
            </div>
            <div class="btnOrder">
                <el-button v-if="this.aggregate.status == 1 || this.aggregate.status == 2" type="primary"
                    @click="closeFun">完成订单</el-button>
                <el-button type="success" color="#1cb09a"><router-link
                        :to="{ path: '/home/Order/OrderEditDetail', query: { aggregateId: this.aggregate.aggregateId } }">修改订单</router-link></el-button>
                <el-button v-if="this.aggregate.status == 1 || this.aggregate.status == 2" type="danger"
                    @click="confirmFun">关闭订单</el-button>

            </div>
        </div>
    </div>
</template>
<script>
import { mapActions, mapGetters, mapState } from 'vuex';

export default {
    name: 'orderdetail',
    data() {
        return {
            aggregate: {
                aggregateId: '',
                status: '',
                payType: '',
                userId: '',
                createTime: '',
                source: ''
            },
            orderUser: {
                contacts: "",
                phone: "",
                postCode: "",
                fullAddress: ""
            },
            orderProds: [
                {
                    prodName: "",
                    pic: "",
                    price: 0.00,
                    attribute: "",
                    number: 1,
                    remarks: "",
                    countMonkey: "0.00"
                }
            ],
            totalMonkey: {
                prodMonkey: "",
                dvyMonkey: "",
                reduceAmount: "",
                countMonkey: ""
            },
            dvyFlowId: "",
        }
    },



    methods: {
        ...mapActions('order', ['getOrderDetailFun', 'confirmOrderFun', 'closeOrderFun']),

        getListDetail() {
            let id = this.$route.query.aggregateId;
            console.log("id", id);
            this.getOrderDetailFun(id).then((res) => {
                this.aggregate = res.data.aggregate;
                this.orderUser = res.data.orderUser;
                this.orderProds = res.data.orderProds;
                this.totalMonkey = res.data.totalMonkey;
                this.dvyFlowId = res.data.dvyFlowId;
            })
        },
        //确认订单
        confirmFun() {
            let id = this.$route.query.aggregateId;
            console.log(id);
            this.confirmOrderFun(id).then(res => {
                this.getListDetail();
            })
        },
        //关闭订单
        closeFun() {
            let id = this.$route.query.aggregateId;
            this.closeOrderFun(id).then(res => {
                console.log(res);
                this.getListDetail();
            })
        },
        //状态判断
        stateJudge(ZT) {
            const map = {
                1: '待付款',
                2: '待发货',
                3: '已发货',
                4: '待评价',
                5: '已完成',
                6: '已关闭',
            }
            return map[ZT]
        }


    },


    created() {
        this.getListDetail();
    },
    mounted() {
        // this.getListDetail();
    },
    computed: {

    }
}
</script>
<style scoped>
.tital {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f0f0f0;
}

.tital button {
    background-color: #1CB09A;
    padding: 8px 16px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    color: #fff;
    margin-right: 40px;
}

.tital h2 {
    width: 100px;
    height: 26px;
    font-size: 18px;
    font-weight: 400;
    border-left: 6px solid #1CB09A;
    padding-left: 10px;
    margin-left: 18px;
}

.datalist {
    width: 95%;
    margin: 30px auto;
    font-size: 14px;

}

.datalistTital {
    height: 50px;
    background-color: rgba(64, 158, 255, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding-left: 18px;
    margin-bottom: 30px;

}

.DataStyle {
    width: 99%;
    margin: auto;
    margin-bottom: 30px;
    border: 3px solid #E6E8F0;
    border-radius: 10px;
    box-shadow: rgb(231, 231, 231) 5px 5px 10px 1px;
}

ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

.DataStyle>div:nth-of-type(1) {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #E6E8F0;
    background-color: rgba(178, 201, 224, 0.5);
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    line-height: 40px;
    font-size: 16px;
    padding-left: 20px;
    box-sizing: border-box;
    font-weight: 500;
}

.DataStyle ul {
    padding: 10px 40px;
}

.DataStyle ul li {
    margin-top: 15px;
    margin-bottom: 15px;
    width: 380px;
}



.goodsData {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #E6E8F0;
}

.goodsImg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 560px !important;
    padding-left: 40px;
}

.goodsImg img {
    width: auto;
    margin-left: 10px;
    height: 100px;
}

.ulData {
    padding-left: 170px !important;
}

.logistics {
    margin-left: 40px;
    margin-top: 30px;
}

.btnOrder {
    width: 360px;
    display: flex;
    justify-content: space-evenly;
    margin: 0 auto;
    margin-bottom: 30px;
}

.btnOrder a {
    color: #fff;
    text-decoration: none;
    display: block;
    height: auto;
}

.el-button--success {
    background-color: #1CB09A;
}
</style>
